<template>
	<div>
		shopping

		<div>


			<button @click="doPlus" v-bind:class="add">+</button>
			<input type="text" disabled='' v-model="count">
			<button @click="doMinus" v-bind:class="min">-</button>

			<br>
			<button @click="setUserLv(count)" v-bind:class="commit">保存数字</button>
			<br>
			<span>认证</span> : <span>{{getUserLv}}</span>
		</div>
		<button @click="goToHome" v-bind:class="goBackBtn">回首页</button>
	</div>
</template>

<script>
    import {mapGetters, mapActions, mapState} from 'vuex';

    export default {
        name: "Shopping",
        methods: {
            goToHome: function () {
                this.$router.back('/home')
            },

            /**************************************** 操作store ****************************************/
            // 获取store的方法
            // 写法一 dispatch(要加上每个modules的命名空间)

            // doPlus: function () {
            //     this.$store.dispatch('buyCar/doPlus')
            // },
            // doMinus: function () {
            //     this.$store.dispatch('buyCar/doMinus')
            // },


            // 写法二 推荐 建立映射关系
            ...mapActions('buyCar', [
                'doPlus',
                'doMinus',
                'setUserLv'
            ])
        },
        data: function () {
            return {
                goBackBtn: 'goBackBtn',
                add: 'add',
                min: 'min',
                commit: 'commit'
            }
        },
        computed: {

            // 获取store数据
            // 写法一
            // ...mapState({
            //     ccc: function (state) {
            //         return state.buyCar.coutn
            //     }
            // })
            // 写法二 推荐 建立映射关系
            ...mapGetters('buyCar', {
                count: 'getCount',
                getUserLv: 'getUserLv'
            })
        }

    }
</script>

<style scoped>
	.add {
		background-color: #FF1493;
	}

	.min {
		background-color: #1E90FF;
	}

	.commit {
		background-color: #7FFF00;
	}

	.goBackBtn {
		background-color: #333cca;
		color: #aa0011;
		font-size: 30px;
	}

</style>